<template >

    <div class="out">
        <Head />
        <div class="">
            <div class="box">
                <div class="item cell-list">
                    <div>
                        <div class="num">{{ info.level }}</div>
                        <div class="label">{{$t('m.我的等级')}}</div>
                    </div>
                    <div>
                        <div class="num">{{ info.recommendNum }}</div>
                        <div class="label">{{$t('m.推广地址数量')}}</div>
                    </div>
                    <div>
                        <div class="num">{{ info.teamPerformance }}</div>
                        <div class="label">{{$t('m.团队业绩')}}</div>
                    </div>
                </div>
            </div>
            <div class="box">




                <div class="inv">
                    <div class="label">
                        <img src="../../assets/img/icon5.png" alt=""> {{$t('m.邀请链接')}}
                    </div>
                    <div class="input van-ellipsis">
                        <span class="van-ellipsis">{{ info.inviteUrl }}</span>

                    </div>
                    <van-button block color="#2AD49E" class="btn" round @click="copy(info.inviteUrl)">{{$t('m.复 制')}}</van-button>

                </div>
            </div>
            <div class="labels">
                <div><img src="../../assets/img/icon6.png" alt=""></div>
                <div>
                    {{ $t('m.推广明细') }}
                </div>
            </div>
            <div class="boxs">
                <div class="row">
                    <div class="col">{{$t('m.时间')}}</div>
                    <div class="col">{{$t('m.地址')}}</div>
                </div>
                <div class="row1" v-for="(item,index) in list" :key="index" :style="index %2 == 1?' background: rgba(255, 255, 255, 1)':''">
                    <div class="col">{{item.createtime}}</div>
                    <div class="col">{{item.nickname}}</div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    pass:true,
    data(){
        return{
            info:{},
            list:[{
                createtime:'1',
                nickname:'2'
            }]

        }
    },
    created() {
        // this.getInfo()
        // this.getList()
    },
    methods:{
        getInfo(){
            this.$encPost({
                url:'/api/tk/invite'
            }).then(res =>{
                this.info = res
            })
        },
        copy(incode) {
            this.$copyText(incode).then(() => {
                this.$toast.success(this.$t("复制成功"));
            });
        },
        getList(){
            this.$encPost({
                url:'/api/invest/recommendList'
            }).then(res =>{
                this.list = res
            })
        }

    }

}
</script>

<style lang="less" scoped>
.box{

    margin-top: 8px;
    .inv{
        padding: 10px 16px;
        background: url("../../assets/img/inv.png");
        background-size: 100% 100%;
    }
    .label{
        .flex-row();
        text-align: left;
        color: #ffffffe6;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 17px;
        img{
            width: 24px;
            height: 24px;
            margin-right: 12px;
        }
    }
    .input{
        margin-top: 24px;
        border-radius: 16px;
        background: #061113cc;
        backdrop-filter: blur(88.199997px);
        padding: 12px 20px;


    }
    .btn{
        margin-top: 16px;
        color: #061113;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 15px;
    }

    .item{


        .flex-between();
        .num{
            color: rgba(255, 255, 255, 1);
            font-family: Outfit;
            font-weight: bold;
            font-size: 15px;
            line-height: 20px;
        }
        .label{
            color: rgba(255, 255, 255, 0.6);
            font-family: PingFang SC;
            font-size: 11px;
        }
    }

}

h1{
    text-align: left;
    color: #eaeae8;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 17px;
    margin-top: 32px;
}

.row{
    padding:15px 15px;
    margin-top: 20px;
    .flex-between();
    .col{
        color: #ffffff99;
        font-family: PingFang SC;
        font-size: 12px;
        text-transform: uppercase;
    }
}
.row1 {
    .flex-between();
    box-sizing: border-box;

    background: rgba(46, 50, 53, 0.1);

    .col {
        padding: 10px;
        color: #ffffff99;
        font-family: Outfit;
        font-size: 13px;
        text-transform: uppercase;
    }


}


.labels {
    margin-top: 24px;
    .flex-row();

    img {
        margin-right: 8px;
        width: 24px;
        height: 24px;
        vertical-align: sub;

    }

    color: #eaeae8;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 17px;
}

.cell-list{
    margin-top: 10px;
    position: relative;
    border-radius: 20px;
    box-sizing: border-box;
    //background: rgba(69, 69, 69, 0.3); /* #4545454d */
    backdrop-filter: blur(88.2px);
    overflow: hidden;
    padding: 12px 16px;

}
.cell-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 1px; /* Border width */
    background: conic-gradient(from 180deg at 50% 50%, #f98427 43.2deg, #ffffff0d 133.95deg, #ffffff00 179.36deg, #2ad49e 225.65deg, #ffffff00 270.75deg, #ffffff00 313.24deg, #ffffff00 359.85deg);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

</style>
